<!--
 * @Author: yuqy
 * @Date: 2023-04-10 17:30:15
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-19 14:57:52
 * @Descripttion: -
-->

<script >
import "animate.css";
import { ref, watch, inject, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
import { useRouter } from 'vue-router'
// import { message } from 'ant-design-vue'
import { Message } from 'view-ui-plus';
import { useStore, mapState } from 'vuex'
import { showLoadingToast, closeToast } from 'vant'
import { getStoreMap } from '@/store/storeMap'
export default {
  name: 'APP',
  setup(){
    const _self = ref();
    const { isLoadMessageing, isLoading } = getStoreMap(["isLoadMessageing", "isLoading"])
    // console.log(isLoadMessageing) 
    // 动画切换参数
    const duration = ref({
      enter: 500,
      leave: 200
    })
    let leaveActiveClass = ref('animate__animated animate__fadeOut')
    let enterActiveClass = ref('animate__animated animate__fadeIn')
    // 路由历史记录
    let routeHistoryArr= new Set()
    let route = useRouter()
    let nowRoute = ref('app');
    // 监控路由变化
    watch(()=>route.currentRoute.value.path, (newValue, oldValue) => {
      if (routeHistoryArr.has(newValue)) { // 说明是回退的
        routeHistoryArr.delete(newValue)
      } else {
        routeHistoryArr.add(newValue)
      }
      nowRoute.value = newValue;
    }, { immediate: true })
    
    // 对加载框进行控制
    watch(() => isLoading.value, (newValue) => {
      if (newValue) {
        showLoadingToast({
          duration: 0,
          message: '加载中...',
          forbidClick: true,
          // loadingType: 'spinner'
        })
      } else {
        closeToast()
      }
    }, { immediate: true })
    let MessageCon = null
    // 对iviewMessage加载框进行控制
    watch(() => isLoadMessageing.value, (newValue) => {
      if (newValue) {
        if (MessageCon) MessageCon() 
        MessageCon = Message.loading({
          content: "Loading...",
          duration: 0
        })
      } else {
        if(!MessageCon) return
        MessageCon() 
        MessageCon = null
      }
    }, { immediate: true })
    
    const setLoading = ()=> {
      // vantLoading()
      // messageLoading()
      setTimeout(() => {
        // console.log(mapData) 
      }, 2000)
    }

    onBeforeMount(() => {
      console.log('我是 onBeforeMount')
    })

    onMounted(async (r) => {
      console.log('我是 onMounted')
      nowRoute.value = route.currentRoute.value.path;
      // console.log(this)
      // vantLoading()
      // setLoading();
      // this.vantLoading();
      // 获取应用信息
    })

    onBeforeUpdate(() => {
      console.log('我是 onBeforeUpdate')
      // console.log(this)
    })

    onUpdated(() => {
      console.log('我是 onUpdated')
    })

    onBeforeUnmount(() => {
      // console.log(this)
      console.log('我是 onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('我是 onUnmounted')
    })

    onActivated(() => {
      console.log('我是 onActivated')
    })

    onDeactivated(() => {
      console.log('我是 onDeactivated')
    })

    onErrorCaptured(() => {
      console.log('我是 onErrorCaptured')
    })

    return { 
      name: '今天是个好日子哦',
      duration,
      leaveActiveClass,
      enterActiveClass,
      setLoading,
      nowRoute
    }
  },
  async created () {
    let nowSystem = this.$route.query.system || localStorage.nowSystem;
    if (nowSystem) {
      localStorage.nowSystem = nowSystem;
    }
    const response = await fetch("../package.json");
    const { version, name } = await response.json();
    this.$store.commit("updateSystem", { nowSystem, version, name });
  }
}
</script>
<template>
  <v-app>
    <v-main >
      <router-view v-slot="{ Component }" :key="nowRoute">
        <Transition
          :duration="duration"
          :leaveActiveClass="leaveActiveClass"
          :enterActiveClass="enterActiveClass"
          appear
        >
          <component :is="Component"/>
        </Transition>
      </router-view>
      <input type="text" id="userRoomOutChangeWrap">
    </v-main>
  </v-app>
</template>
<style scoped >

#userRoomOutChangeWrap {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
}
.v-application__wrap {
  min-height: 0;
}
/* .v-leave-active {
	transition: all 0.2s ease;
}
.v-enter-active {
	transition: all 0.5s ease;
}
.v-enter-active {
	transition-delay: 0.2s;
} */
.animate__fadeIn {
  transition-delay: 0.5s;
}
/* .v-enter-from,
.v-leave-to {
	opacity: 0;
} */
</style>
